<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>登录</title>

   	 	<link href="../../css/bootstrap.css" rel="stylesheet">
    	<link rel="stylesheet" href="../../css/retrieve/swiper.min.css">
		<link rel="stylesheet" href="../../css/layer.css">
		<script type="text/javascript" src="../../js/jquery-2.2.3.min.js"></script>
		<script type="text/javascript" src="../../js/layer.js"></script>

		<script type="text/javascript" src="../../js/itnetcao.js"></script>

    <style type="text/css">
      *{margin: 0px;padding: 0px;}
      #main{
        width: 10.2rem;
        height: 18.18rem;
        background-image: url(../../image/bg.png);
        background-size: cover;
        border: 1px solid #fff;
      }
      #img_top{
        width: 6rem;
        height: 2.5rem;
        margin-top: 1.3rem;
        margin-left: 2.1rem;
      }
      #img_top img{
        width: 100%;
        height: 100%;
      }
      #information{
        margin-top: 3rem;

      }
      .box{
        width: 6.5rem;
        height: 1rem;
        margin-top: 0.5rem;
        border-radius: 0.5rem;
        border: 1px solid #ccc;
        padding: 0rem 1rem;
        outline-color: #ffffff;
      }
      .box:focus{
      	border-color:#40AFFE;
      	border-shadow:5px 5px 5px;
      	-webkit-border-shadow:5px 5px 5px;
      }
      .icons{
        width: 0.5rem;
        height: 1rem;
      }
      #retrieve{
        font-size: 0.4rem;
        font-family: SimHei;
        margin-left: 0.2rem;
      }
      #info{
        width: 6.3rem;
        height: 1rem;
        margin-top: 40px;
        border-radius: 0.5rem;
        border: none;
        text-align: center;
        background-color: rgb(255, 198, 17);
        font-family: SimHei;
        color: #fff;
        font-size: 0.5rem;
        outline-color: #ffffff;
      }
    </style>
</head>
<body>
  <div id="main">

    <!-- 头部logo -->
    <div id="img_top">
      <img src="../../image/logo.jpg"/>
    </div>

    <div id="information" align="center">
      <!-- 账号文本框 -->
      <div>
        <div class="glyphicon glyphicon-user icons" style='position:absolute;margin-top:7.6rem;margin-left:0.2rem;'></div>
        <input type="text" class="box usernames" placeholder="请输入账号" id="img_number" value=""/>
      </div>
      <!-- 密码文本框 -->
      <div>
        <div class="glyphicon glyphicon-lock icons" style='position:absolute;margin-top:9.2rem;margin-left:0.2rem;'></div>
        <input type="password" class="box passwords" placeholder="请输入密码" id="img_pwd"/>
      </div>

      <div align="left" style='margin-left:18%;'>
        <a id="retrieve" onclick="f1()">找回密码<a>
      </div>

      <div>
        <input type="button" value="登录" id="info" onclick="login()"/>
      </div>

    </div>
  </div>

  <script>


  localStorage.setItem("url", "http://www.gdgcx168.com/miningmachine");

  // localStorage.setItem("url", "http://192.168.1.109:8080");

  function login() {
  	if($(".usernames").val().trim().length == 0) {
  		layer.open({
			content: "请输入用户名."
		})
		return;
  	}
  	if($(".passwords").val().trim().length == 0) {
  		layer.open({
			content: "请输入用户密码."
		})
		return;
  	}
  	itcao.itGetAjaxBigData(localStorage.getItem("url") + "/user/controller/UserLoginAPP.do", "userIphone=" + $(".usernames").val() + "&userPassword=" + $(".passwords").val()).done(function(result) {
      console.log(result);
      var json = jQuery.parseJSON(result);
  		if(json.state == true) {
  			layer.open({
				content: "登陆成功."
			})
  			localStorage.setItem("miningmachine_user", JSON.stringify(json.bean));
  			setTimeout(function() {
  				window.location.href = "../bottom/bottom.html";
  			}, 1000)
  		}else {
  			alert(json.value);
  		}
  	})
  }


			(function() {
				var supportsOrientationChange = 'onorientationchange' in window ? 'orientationchange' : 'resize';
				var timeoutId;

				function setRem() {
					var clientWidth = document.documentElement.clientWidth;
					var nowPX = clientWidth / 1024 * 100;
					document.documentElement.style.fontSize = nowPX + 'px';
				}

				setRem();
				window.addEventListener(supportsOrientationChange, function() {
					clearTimeout(timeoutId);
					timeoutId = setTimeout(function() {
						setRem();
					}, 300);
				}, false);
			})();

      //找回密码
      function f1(){
      	location.href='../retrieve/retrieve.html';
      };

      //登录
       function f2(){
      	var name = document.getElementById('img_number').value;
      	var pwd = document.getElementById('img_pwd').value;
      	if(name!=null && name!="" &&
      		pwd!=null && pwd!=""
      	){


      	}else{
      		alert("用户名或密码不能为空！");
      	}
      };

	</script>
</body>
</html>
